/** @format */

import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)

// 判断元素有没有出现在可视区，用到一个新的API，InterectionObserver(交叉监视器)
app.directive('lazyload', (el, binding) => {
	// el: img标签
	// binding.value: 实际要展示的图片路径
	// 原理：判断 el 有没有出现在可视区，如果是的话，才去给 el 设置 src 属性

	// 实例化 InterectionObserver 对象
	const io = new IntersectionObserver(([entry]) => {
		// entry: 交叉状态对象
		if (entry.isIntersecting) {
			// 说明图片与可视区发生了交叉，也就是图片出现在了可视区
			el.src = binding.value

			// 监听图片加载错误事件
			el.addEventListener('error', (error) => {
				console.log('图片加载失败, ', error)
			})

			// 停止监听
			io.unobserve(el)
			// 关闭监听器
			io.disconnect()
		}
	})

	// 开启监视
	io.observe(el)
})
app.mount('#app')
